<template>
<div>
  <div
    class="move-guide-line vertical-line l-vertical-line"
    v-show="isMoving"
    v-bind:style="verticalStyleL"
  ></div>
  <div
    class="move-guide-line vertical-line r-vertical-line"
    v-show="isMoving"
    v-bind:style="verticalStyleR"
  ></div>
  <div
    class="move-guide-line horizontal-line t-horizontal-line"
    v-show="isMoving"
    v-bind:style="horizontalStyleT"
  ></div>
  <div
    class="move-guide-line horizontal-line b-horizontal-line"
    v-show="isMoving"
    v-bind:style="horizontalStyleB">
  </div>
</div>
</template>

<script>
export default {
  name: 'MoveGuideLines',
  data(){
    return{

    }
  },
  computed: {
    isMoving(){
      console.log("handdle");
      return this.$store.state.imageDragMoudules.acFlag.isMoving;
    },
    position(){
      return this.$store.state.imageDragMoudules.acComponent.position
    },
    size(){
      return this.$store.state.imageDragMoudules.acComponent.size
    },
    borderWidth(){
      return Math.floor(2 / this.$store.state.imageDragMoudules.canvas.scale) || 1;
    },
    verticalStyleL(){
      if (!this.isMoving || !this.position) return 'display: none';
      return `left: ${this.position.left}px; border-width: 0; border-right-width: ${this.borderWidth}px`;
    },
    verticalStyleR(){
      if (!this.isMoving || !this.position) return 'display: none';
      return `left: ${
        this.position.left + this.size.width - this.borderWidth
      }px; border-width: 0; border-right-width: ${this.borderWidth}px`;
    },
    horizontalStyleT(){
      if (!this.isMoving || !this.position) return 'display: none';
      return `top: ${this.position.top}px; border-width: 0; border-bottom-width: ${this.borderWidth}px`;
    },
    horizontalStyleB(){
      if (!this.isMoving || !this.position) return 'display: none';
      return `top: ${
        this.position.top + this.size.height - this.borderWidth
      }px; border-width: 0; border-bottom-width: ${this.borderWidth}px`;
    }
  },
  methods:{

  } 
}
</script>

<style lang="scss" scoped>
.move-guide-line {
  position: absolute;
  background: none;
  outline: none;
  box-sizing: border-box;
  pointer-events: none;
  border-style: dashed;
  border-color: #c8141499;
  z-index: 0;
}
.vertical-line {
  top: 0;
  bottom: 0;
  width: 0;
}
.horizontal-line {
  left: 0;
  right: 0;
  height: 0;
}
</style>
